<template>
  <view class="notification-container" v-if="notifications.length > 0">
    <view
      class="notification-card"
      v-for="item in notifications"
      :key="item.oId"
      @click="handleNotificationClick(item)"
      :class="{ unread: !item.hasRead }"
    >
      <!-- 用户头像 -->
      <image
        class="user-avatar"
        :src="item.userAvatarURL"
        mode="aspectFill"
      ></image>

      <!-- 通知内容区 -->
      <view class="content-wrapper">
        <!-- 用户信息和时间 -->
        <view class="user-action-row">
          <text class="username">{{ item.userName }}</text>
          <text class="action-text">{{ getAtTypeText(item.dataType) }}</text>
          <text class="time-ago">{{ formatTime(item.createTime) }}</text>
        </view>

        <!-- 评论内容 -->
        <view class="comment-content">
          <text class="comment-text">{{ formatContent(item) }}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 空状态 -->
  <view class="empty-container" v-else-if="!loading">
    <FeatherIcon name="at-sign" size="60" color="#e0e0e0" />
    <text class="empty-title">暂无提及通知</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import { timeAgo } from "@/utils/common.js";

const props = defineProps({
  notifications: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["notification-click"]);

// 处理通知点击
const handleNotificationClick = (notification) => {
  // 标记为已读的ID
  const readId = notification.oId;

  // 准备跳转信息，标准化跳转目标
  let routeInfo = {
    readId: readId, // 用于标记已读的ID
    type: "unknown", // 默认跳转类型
    params: {}, // 跳转参数
  };

  // 根据dataType确定不同的跳转目标
  if (notification.dataType === 38) {
    routeInfo.type = "chatroom";
  } else if (notification.dataType === 2) {
    // 尝试从内容中提取文章ID或其他信息
    // 如果有详细的URL信息，可以进一步处理
    routeInfo.type = "article";
    routeInfo.original = notification;
  } else {
    // 其他类型，保留原始数据供父组件处理
    routeInfo.type = "unknown";
    routeInfo.original = notification;
  }

  emit("notification-click", routeInfo);
};

// 获取@类型的文本描述
const getAtTypeText = (dataType) => {
  switch (dataType) {
    case 38:
      return "在聊天室@了你";
    case 2:
      return "@了你";
    default:
      return "提到了你";
  }
};

// 格式化通知内容
const formatContent = (item) => {
  if (!item) return "";

  try {
    // 一些通知类型可能不是content字段，根据通知类型处理不同的字段
    let content = "";

    if (item.content) {
      content = item.content;
    } else if (item.description) {
      // 系统通知可能用description字段
      content = item.description;
    } else {
      // 尝试从对象中查找可能包含内容的字段
      for (const key in item) {
        if (typeof item[key] === "string" && item[key].length > 10) {
          content = item[key];
          break;
        }
      }
    }
    if (!content) {
      return "查看通知详情";
    }

    // 提取<a>标签中的文本，保留链接文本内容
    const extractedLinks = [];
    let tempContent = content.replace(
      /<a\s+[^>]*?>(.*?)<\/a>/g,
      (match, text) => {
        extractedLinks.push(text.trim());
        return `__LINK_${extractedLinks.length - 1}__`;
      }
    );

    // 去除所有HTML标签
    tempContent = tempContent.replace(/<[^>]*>/g, " ");

    // 把提取的链接文本放回
    extractedLinks.forEach((text, index) => {
      tempContent = tempContent.replace(`__LINK_${index}__`, text);
    });

    // 清理空格
    const result = tempContent.replace(/\s+/g, " ").trim();

    return result || "查看通知详情";
  } catch (error) {
    console.error("格式化内容错误", error);
    return "查看通知详情";
  }
};

// 格式化时间显示
const formatTime = (timestamp) => {
  if (!timestamp) return "";

  try {
    // 处理CST格式的时间字符串
    if (typeof timestamp === "string" && timestamp.includes("CST")) {
      // 将CST时间字符串转换为Date对象
      const dateStr = timestamp.replace("CST", "GMT+0800");
      const date = new Date(dateStr);
      if (!isNaN(date.getTime())) {
        return timeAgo(date.getTime());
      }
    }

    // 原有的处理逻辑
    return timeAgo(timestamp);
  } catch (err) {
    console.error("格式化时间错误", err);
    return "";
  }
};
</script>

<style>
/* 主容器 */
.notification-container {
  background-color: #f8f8f8;
}

/* 通知卡片 */
.notification-card {
  position: relative;
  display: flex;
  padding: 28rpx 32rpx;
  margin-bottom: 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.04);
}

/* 未读状态 */
.notification-card.unread {
  background-color: #fafafa;
}

/* 用户头像 */
.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  margin-right: 24rpx;
  flex-shrink: 0;
}

/* 内容容器 */
.content-wrapper {
  flex: 1;
  overflow: hidden;
}

/* 用户操作行 */
.user-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12rpx;
}

/* 用户名 */
.username {
  font-size: 30rpx;
  font-weight: 500;
  color: #333333;
  margin-right: 8rpx;
}

/* 操作文本 */
.action-text {
  font-size: 26rpx;
  color: #666666;
  margin-right: 12rpx;
}

/* 时间文本 */
.time-ago {
  font-size: 24rpx;
  color: #999999;
  margin-left: auto;
}

/* 评论内容 */
.comment-content {
  margin-top: 8rpx;
}

/* 评论文本 */
.comment-text {
  font-size: 28rpx;
  color: #333333;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 空状态容器 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 160rpx 0;
}

/* 空状态标题 */
.empty-title {
  font-size: 30rpx;
  color: #999999;
  margin-top: 24rpx;
}

/* 卡片激活状态 */
.notification-card:active {
  background-color: #f7f7f7;
}
</style>
